<%--
  Created by IntelliJ IDEA.
  User: cjq
  Date: 2020/2/4
  Time: 10:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<html>
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctxLayui}/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctxLayui}/layuiadmin/style/myStyle.css" media="all">

</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">系统管理</a>
        <a><cite>角色管理</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body">
            <table class="layui-hide" id="sysRoleListTable" lay-filter="sysRoleListTable"></table>

            <script type="text/html" id="sysRoleListTable-toolbar">
                <div class="layui-btn-container">

                    <shiro:hasPermission name="sysRole:add">
                        <button class="layui-btn layui-btn-sm" lay-event="addRec">添加</button>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="sysRole:del">
                        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delRec">删除</button>
                    </shiro:hasPermission>

                </div>
            </script>

            <script type="text/html" id="sysRoleListTable-bar">
                <shiro:hasPermission name="sysRole:bar:edit">
                    <a class="layui-btn layui-btn-xs" lay-event="editRec">编辑</a>
                </shiro:hasPermission>
                <shiro:hasPermission name="sysRole:bar:configMenu">
                    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="configMenu">配菜单</a>
                </shiro:hasPermission>

            </script>
        </div>
    </div>
</div>

<script src="${ctxLayui}/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${ctxLayui}/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','dict','tree'], function(){
        var $ = layui.$
            ,table = layui.table
            ,form = layui.form;
        var dict = layui.dict;

        var tree = layui.tree;
        var admin = layui.admin;


        var tplStatus = function(d){
            var html = dict.showName("status",d.status);
            return html;
        };
        var tplYesNot = function (d) {
            var html = dict.showName("yesNot",d.hasAllRight);
            return html;
        }

        var tableIns = table.render({
            elem:'#sysRoleListTable'
            ,url: ctx+'/system/sysRole/query'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: '#sysRoleListTable-toolbar'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'name', title: '名称', align: 'center',minWidth:60}
                ,{field:'sortOrder', title: '排序', align: 'center',minWidth:90}
                ,{field:'hasAllRight', title: '是否所有权限', align: 'center',minWidth:80,templet:tplYesNot}
                ,{field:'status', title: '状态',  align: 'center',minWidth:30,templet:tplStatus}
                ,{title:'操作', toolbar: '#sysRoleListTable-bar', width:120}

            ]]
            ,limit: 99999
        });

        var  active = {
            addRec: function(){
                window.formData = null;
                layer.open({
                    type: 2
                    ,title: '角色信息'
                    ,content: 'sysRoleForm.jsp'
                    ,maxmin: true
                    ,area: layui.setter.area
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");

                        //监听提交
                        iframeWindow.layui.form.on('submit(layuiadmin-app-form-submit)', function(data){
                            var field = data.field; //获取提交的字段

                            //提交 Ajax 成功后，静态更新表格中的数据
                            //$.ajax({});
                            $.ajax({
                                url:ctx+"/system/sysRole/add",    //请求的url地址
                                dataType:"json",   //返回格式为json
                                async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                                data:field,    //参数值
                                type:"POST",   //请求方式
                                cache:false,
                                beforeSend:function(xml){
                                },
                                success:function(response,status){
                                    active.reload();
                                    form.render();
                                    layer.close(index);
                                },
                                complete:function(xml,status){
                                    //请求完成的处理
                                },
                                error:function(xml,status,err){
                                    //请求出错处理
                                }
                            });
                        });

                        submit.trigger('click');
                    }
                });
            },
            editRec:function(obj){
                var rec = obj.data;
                window.formData = null;
                layer.open({
                    type: 2
                    ,title: '角色信息'
                    ,content: 'sysRoleForm.jsp?id='+ rec.id
                    ,maxmin: true
                    ,area: layui.setter.area
                    ,btn: ['确定', '取消']
                    ,success:function(layero,index){
                        var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                        var data = obj.data;
                        window.formData = data;
                        $.each(data,function(item){
                            body.find("[name="+item+"]").val(data[item]);
                        });
                    }
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submit = layero.find('iframe').contents().find("#layuiadmin-app-form-edit");

                        //监听提交
                        iframeWindow.layui.form.on('submit(layuiadmin-app-form-edit)', function(data){
                            var field = data.field; //获取提交的字段

                            //提交 Ajax 成功后，静态更新表格中的数据
                            //$.ajax({});
                            field.id = rec.id;
                            $.ajax({
                                url:ctx+"/system/sysRole/modify",    //请求的url地址
                                dataType:"json",   //返回格式为json
                                async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                                data:field,    //参数值
                                type:"POST",   //请求方式
                                cache:false,
                                beforeSend:function(xml){
                                },
                                success:function(response,status){
                                    active.reload();
                                    form.render();
                                    layer.close(index);
                                },
                                complete:function(xml,status){
                                    //请求完成的处理
                                },
                                error:function(xml,status,err){
                                    //请求出错处理
                                }
                            });
                        });

                        submit.trigger('click');
                    }
                });
            },
            delRec:function () {
                var checkStatus = table.checkStatus('sysRoleListTable')
                var recs = checkStatus.data;
                if(!recs || recs.length<=0){
                    layer.msg('请至少选择一条记录');
                    return;
                }
                layer.confirm('确定删除'+recs.length+'条记录?', function(index){
                    var idArr = [];
                    for(var i=0;i<recs.length;i++){
                        var rec = recs[i];
                        idArr.push(rec.id);
                    }
                    $.ajax({
                        url:ctx+"/system/sysRole/deleteByBatch",    //请求的url地址
                        dataType:"json",   //返回格式为json
                        async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                        data:{"ids":idArr.join(",")},    //参数值
                        type:"POST",   //请求方式
                        cache:false,
                        beforeSend:function(xml){
                        },
                        success:function(response,status){
                            active.reload();
                            layer.close(index);
                        },
                        complete:function(xml,status){
                            //请求完成的处理
                        },
                        error:function(xml,status,err){
                            //请求出错处理
                        }
                    });

                });
            },
            reload: function(){
                tableIns.reload();
            },
            configMenu:function(obj){
                var rec = obj.data;
                window.formData = null;
                layer.open({
                    type: 2
                    ,title: '配菜单'
                    ,content: 'configMenu.jsp'
                    ,maxmin: true
                    ,area: ['500px', '600px']
                    ,btn: ['确定', '取消']
                    ,success:function(layero,index){
                        var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                        var data = obj.data;
                        window.formData = data;
                    }
                    ,yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index]
                            ,submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");

                        //监听提交
                        iframeWindow.layui.form.on('submit(layuiadmin-app-form-submit)', function(data){
                            var field = iframeWindow.layui.getFormField(); //获取提交的字段
                            var rtn = admin.syncReq(ctx+"//system/sysRoleMenu/saveSysRoleMenu",field);
                            if(rtn.code==0){
                                layer.msg('保存成功');
                                layer.close(index);
                            }else{
                                layer.msg('保存失败');
                            }
                        });

                        submit.trigger('click');
                    }
                });
            },
        };

        //头工具栏事件
        table.on('toolbar(sysRoleListTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'addRec':
                    active.addRec()
                    break;
                case 'delRec':
                    active.delRec(checkStatus)
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(sysRoleListTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'editRec'){
                active.editRec(obj);
            }else if(obj.event==='configMenu'){
                active.configMenu(obj);
            }
        });

    });
</script>
</body>
</html>
